<template>
  <!-- 用户抗身份识别 -->
  <div>
    <div style="padding: 10px;">
      <div class="flex-container">
        <!-- 标签页 -->
        <el-tabs v-model="activeTabName" @tab-click="handleClick" class="tab">
          <el-tab-pane label="全部" name="all"/>
          <el-tab-pane label="已完成" name="finished"/>
          <el-tab-pane label="未完成" name="incomplete"/>
          <el-tab-pane label="进行中" name="in_progress"/>
        </el-tabs>
        <!-- 后三个元素靠最左边 -->
        <div class="flex-group-left">

          <!-- 日期选择器和搜索框容器 -->
          <div class="flex-grow">
            <el-date-picker style="margin-right: 10px" v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" class="flex-item"/>

            <el-button @click="handleBatchDelete">
              <svg-icon class="search-icon" icon-class="shanchu"/>
              批量删除
            </el-button>
            <el-button  type="primary"  style="background: linear-gradient( 270deg, #2DBFFD 0%, #0E5FFF 100%);" @click="dialogFormVisible = true">
              <svg-icon class="search-icon" icon-class="shaoyisao"/>
              抗识别
            </el-button>
         </div>

        </div>
      </div>

      <!-- 抗识别任务配置 -->
      <el-dialog title="干扰任务详情" :visible.sync="dialogFormVisible" class="tc">
        <!-- 上半部分 -->
        <div>
          <el-row :gutter="20" class="form">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                根用户：
              </div>
            </el-col>
            <el-col :span="8">
              <el-input v-model="input1" value="admin"/>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                ID：
              </div>
            </el-col>
            <el-col :span="8">
              <el-input v-model="input2" value="123456"/>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="form">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                昵称：
              </div>
            </el-col>
            <el-col :span="8">
              <el-input v-model="input3" value="秋天柠檬"/>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                平台：
              </div>
            </el-col>
            <el-col :span="8">
              <el-input v-model="input4" value="微博"/>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="form">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                抗识别方式
              </div>
            </el-col>
            <el-col :span="20">
              <el-radio v-model="radio" label="1">
                干扰方式1
              </el-radio>
              <el-radio v-model="radio" label="2">
                干扰方式2
              </el-radio>
            </el-col>
          </el-row>
        </div>

        <!-- 下半部分表格 -->
        <div>
          <el-table ref="multipleTable" :data="currentTableData" tooltip-effect="dark" style="width: 100%"
                    :default-sort="{ prop: 'date', order: 'descending' }" @selection-change="handleSelectionChange">
            <el-table-column type="selection"/>
            <el-table-column label="昵称" prop="nickname" sortable>
              <template slot-scope="scope">
                {{ scope.row.nickname }}
              </template>
            </el-table-column>
            <el-table-column prop="id" label="ID" sortable/>
            <el-table-column prop="relation" label="关系" width="250" show-overflow-tooltip>
              <el-button>关注</el-button>
              <el-button>粉丝</el-button>
            </el-table-column>
          </el-table>

        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            确 定
          </el-button>
        </div>
      </el-dialog>

      <div class="mainTable">
        <el-table ref="multipleTable" :data="currentTableData" tooltip-effect="dark" style="width: 100%"
                  :default-sort="{ prop: 'date', order: 'descending' }" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"/>
          <el-table-column label="昵称" prop="nickname" width="120" sortable>
            <template slot-scope="scope">
              {{ scope.row.nickname }}
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" width="120" sortable/>
          <el-table-column prop="gender" label="性别" show-overflow-tooltip sortable/>
          <el-table-column prop="platform" label="平台" show-overflow-tooltip sortable/>
          <el-table-column prop="status" label="状态" show-overflow-tooltip sortable>
            <template slot-scope="scope">
              {{
                scope.row.status === '已完成' ? '已完成抗识别' : (scope.row.status === '进行中' ? '进行中' : '未进行抗识别')
              }}
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="任务开始时间" show-overflow-tooltip/>
          <el-table-column prop="progress" label="进度" width="200">
            <template slot-scope="scope">
              <jwd-progress :percentage="scope.row.progress"/>
            </template>
          </el-table-column>
          <el-table-column prop="details" label="详情" show-overflow-tooltip>
            <el-button type="text" @click="todetailspage">
              详情
            </el-button>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentPageChange"
                       :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 50, 100]"
                       :total="totalDataCount"
                       layout="total, sizes, prev, pager, next, jumper" style="margin-top: 20px; text-align: center;">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import jwdProgress from "@/components/jwdProgress/index.vue";

export default {
  data() {
    return {
      input1: "admin",
      input2: "123456",
      input3: "秋天柠檬",
      input4: "微博",
      radio: "1",
      searchText: "",
      value1: "",
      activeTabName: 'all', // 默认显示所有
      dialogVisible: false,
      dialogFormVisible: false,
      searchKeyword: '', // 用于存储搜索关键词
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数据条数
      totalDataCount: 0,
      activeName: "first",
      active: "first",
      // 弹窗数据
      tableData1: [
        {
          nickname: "秋天的树叶",
          id: "46156",
        },
        {
          nickname: "秋天的树叶",
          id: "46156",
        },
        {
          nickname: "秋天的树叶",
          id: "46156",
        },
      ],
      tableData: [],
    };
  },
  components: {
    jwdProgress,
  },
  methods: {
    // todetailspage() {
    //   this.$router.push("/networkUser/antiAttributive/antiAttributivedetails");
    // },

    handleSelecti(selection) {
      console.log(selection);
    },
    handleClick() {
      // this.dialogFormVisible = true;
    },
    handleSearch() {
      // 过滤数据的逻辑
      this.filteredTableData = this.tableData.filter(item => {
        return Object.keys(item).some(key =>
          String(item[key]).toLowerCase().includes(this.searchKeyword.toLowerCase())
        );
      });
      // 更新总数据计数
      this.totalDataCount = this.filteredTableData.length;
      // 重置页码为1
      this.currentPage = 1;
    },

    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1; // 当改变每页显示条数时重置页码为1
    },
    handleCurrentPageChange(newPage) {
      this.currentPage = newPage;
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1); // 从数组中删除指定索引的元素
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleBatchDelete() {
      if (this.$refs.multipleTable.selection.length === 0) {
        this.$message({
          message: '请至少选择一个用户进行删除',
          type: 'warning'
        });
        return;
      }

      this.$confirm('确认删除这些用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData = this.tableData.filter(item => {
          return !this.$refs.multipleTable.selection.some(row => row.id === item.id);
        });
        this.$refs.multipleTable.clearSelection(); // 清除已选择的项
        this.$message({
          message: '批量删除成功',
          type: 'success'
        });
      }).catch(() => {
        this.$message({
          message: '已取消批量删除',
          type: 'info'
        });
      });
    },
    handleSelectionChange() {
      // 在这里处理选择变化的逻辑
    },
  },
  created() {
    // 初始化数据
    this.tableData = [{
      nickname: "秋天的树叶",
      id: "46156",
      gender: "女",
      platform: "微博",
      status: true,
      startTime: "2022-01-01 10:00:00",
      progress: 30,
    },

      {
        nickname: "春天的花",
        id: "12345",
        gender: "女",
        platform: "微博",
        status: "未进行抗识别",
        startTime: "2022-01-02 10:00:00",
        progress: 100,
      },
      {
        nickname: "夏天的阳光",
        id: "67890",
        gender: "男",
        platform: "微信",
        status: "已完成抗识别",
        startTime: "2022-01-03 10:00:00",
        progress: 70,
      },
      {
        nickname: "冬天的雪花",
        id: "24680",
        gender: "女",
        platform: "QQ",
        status: "已完成抗识别",
        startTime: "2022-01-04 10:00:00",
        progress: 90,
      },
      {
        nickname: "秋天的落叶",
        id: "13579",
        gender: "男",
        platform: "抖音",
        status: "已完成抗识别",
        startTime: "2022-01-05 10:00:00",
        progress: 30,
      },
      {
        nickname: "春天的花朵",
        id: "86420",
        gender: "女",
        platform: "淘宝",
        status: "已完成抗识别",
        startTime: "2022-01-06 10:00:00",
        progress: 50,
      },],
      this.totalDataCount = this.tableData.length;

  },
  computed: {
    currentTableData() {
      if (!this.searchKeyword || this.filteredTableData.length === 0) {
        return this.tableData;
      }
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      return this.filteredTableData.slice(start, end);
    },
  },
};
</script>

<style lang="scss" scoped>


.mainTable {
  padding: 15px;
  height: 85vh;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中对齐 */
}

.btn {
  margin-left: 60px;
  background: linear-gradient(228deg, #FFC04B 0%, #FFA216 100%);
  color: #fff;
  border-radius: 4px 4px 4px 4px;
}

.flex-group-right {
  margin-left: 15px;
}

.rightBtn {
  margin-right: 55px;
  width: 106px;
  background: linear-gradient(270deg, #2DBFFD 0%, #0E5FFF 100%);
  border-radius: 4px 4px 4px 4px;
}

.textStyle {
  margin-left: 5px;
  width: 96px;
  height: 22px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #535A6C;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

::v-deep .el-pager li.active {
  background: linear-gradient(270deg, #2DBFFD 0%, #0E5FFF 100%) !important;
  color: white !important;
}
.search-icon {
  cursor: pointer;
  font-size: 18px;
  vertical-align: middle;
}
</style>
